<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        #wrap img{
            width: 200px;
        }
        #content{
            width: 200px;
            display: none;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="content">
        <h3>姓名：星星</h3>
        <p>生日：未知</p>
        <p>简介：我**你个大**</p>
    </div>
    <img src="img/star.gif" alt="" >
</div>
</body>
<script>
    $(function () {
        $('#wrap img').bind('click',function () {
            // $('#content').slideDown('slow');
            //       Up/Down     ↓ 修改这个地方 滑动的是内容，不是图片
            $('#content').slideToggle('slow',function () {
                //向下移动完成后执行以下语句
                $('#wrap img').fadeOut('slow',function () {
                    //新图片淡入显示 慢
                    if ($(this).attr('src') == 'img/star.gif') {
                        $(this).attr('src','img/bulbon.gif').fadeIn('slow');
                    }else{
                        $(this).attr('src','img/star.gif').fadeIn('slow');
                    }
                    $('#content').children('h3').css('color','red');
                })
            })
        })
    })
</script>
</html>